<template>
	<view>
		<u-popup :show="show" mode="right" @close="close" @open="open" bgColor="#1a2038">
			<view class="lang_container">
				    <u-icon name="close" color="#fffff" size="16" @click="close" style="position: absolute;right:30rpx;top:50rpx"></u-icon>
					<view class="lang_list">
						<view class="lang_list_menu" v-for="(item,index) in languageList" :key="index"
							@click="selectLanguage(index)" :class="index==select?'selet_lang':''">
							<image :src="item.url" class="lang_img">
								<view class="lang_name"><text>{{item.name}}</text></view>
						</view>
					</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		name: 'langNav',
		props: {
			//是否固定
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showLanguage: false,
				show: false,
				select:0,
				languageList: [{
						name: 'English',
						url: "/static/images/entryscreen/usa.svg"
					},
					{
						name: '简体中文',
						url: "/static/images/entryscreen/china.svg"
					},
				],

			};
		},
		mounted() {
			/* 获取钱包余额 */
			
			this.address = yui.hidden(uni.getStorageSync("yy_wallet").address, 6, 6)
			this.select = uni.getStorageSync('langname') ? uni.getStorageSync('langname') : 0
			
		},
		methods: {

			selectLanguage(index) {
				switch (index) {
					case 0:
						uni.setLocale('en');
						this.$i18n.locale = 'en';
						break;
					case 1:
						uni.setLocale('zh-Hans');
						this.$i18n.locale = 'zh-Hans';
						break;
					case 2:
						uni.setLocale('zh-Hant');
						this.$i18n.locale = 'zh-Hant';
						break;
					case 3:
						uni.setLocale('jap');
						this.$i18n.locale = 'jap';
						break;
					case 4:
						uni.setLocale('kor');
						this.$i18n.locale = 'kor';
						break;
					case 5:
						uni.setLocale('thailand');
						this.$i18n.locale = 'thailand';
						break;
					case 6:
						uni.setLocale('malaysia');
						this.$i18n.locale = 'malaysia';
						break;
					case 7:
						uni.setLocale('vietnam');
						this.$i18n.locale = 'vietnam';
						break;
					case 8:
						uni.setLocale('indonesia');
						this.$i18n.locale = 'indonesia';
						break;
					case 9:
						uni.setLocale('saudi');
						this.$i18n.locale = 'saudi';
						break;
					case 10:
						uni.setLocale('brazil');
						this.$i18n.locale = 'brazil';
						break;
					case 11:
						uni.setLocale('russia');
						this.$i18n.locale = 'russia';
						break;
					case 12:
						uni.setLocale('germany');
						this.$i18n.locale = 'germany';
						break;
					case 13:
						uni.setLocale('france');
						this.$i18n.locale = 'france';
						break;
					case 14:
						uni.setLocale('italy');
						this.$i18n.locale = 'italy';
						break;
					case 15:
						uni.setLocale('turkey');
						this.$i18n.locale = 'turkey';
						break;
					case 16:
						uni.setLocale('spain');
						this.$i18n.locale = 'spain';
						break;
					case 17:
						uni.setLocale('poland');
						this.$i18n.locale = 'poland';
						break;
					case 18:
						uni.setLocale('india');
						this.$i18n.locale = 'india';
						break;
					case 19:
						uni.setLocale('ukraine');
						this.$i18n.locale = 'ukraine';
						break;
				}
				this.select = index
				this.showLanguage = !this.showLanguage;

				uni.setStorageSync("langname", index);
			    location.reload();
			},

			handleMaskClick() {

				this.$emit('close', {});
			},
			close() {
				this.$emit('close', {});
				// console.log('close');
			},
			setLanguage(index) {
				// this.select = 1

				this.showLanguage = !this.showLanguage;
				// this.show = false
			},

		}
	};
</script>

<style scoped lang="scss">
	.lang_container{
		width:300rpx;
		padding:20rpx;
		.lang_list{
			 margin-top: 100rpx;
			.lang_close{
				
			}
			.lang_list_menu{
				display: flex;
				justify-content: left;
				 margin-top: 10rpx;
				
				font-size: 26rpx;
				height:50rpx;
				padding:10rpx 10rpx;
				height:60rpx;
				.lang_img{
					height: 40rpx;
					width:40rpx;
				}
				.lang_name{
					margin-left: 14rpx;
				}
				
			}
			.selet_lang{
				 
				background:#424b66;
				padding:10rpx 10rpx;
				// padding:10rpx;
				border-radius: 40rpx;
			}
			
		}
	}
</style>